JavaScripti pakettide optimeerimisstrateegia: täiustatud koodi jagamise tehnikad

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Products = lazy(() => import('./pages/Products'));

function App() {
  return (
    
      Laadib...

Selles näites laaditakse `Home`, `About` ja `Products` komponendid dünaamiliselt `React.lazy()` abil. `Suspense` komponent pakub varu-UI-d (laadimise indikaator), samal ajal kui komponendid laaditakse. See tagab, et kasutaja ei näe tühja ekraani, oodates koodi allalaadimist. Need lehed on nüüd jagatud eraldi osadeks ja laaditakse ainult siis, kui navigeerite vastavatele marsruutidele.

Täiustatud koodi jagamise tehnikad

Lisaks koodi jagamise põhitüüpidele saab mitmed täiustatud tehnikad teie JavaScripti pakette veelgi optimeerida.

1. Müüja jagamine

Müüja jagamine hõlmab kolmandate osapoolte teekide (nt React, Angular, Vue.js) eraldi paketti eraldamist. Kuna need teegid muutuvad teie rakenduskoodiga võrreldes vähem tõenäoliselt sageli, saab brauser neid tõhusamalt vahemällu salvestada.

Näide (Webpack):

module.exports = {
  // ... muud konfiguratsioonid
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

See Webpacki konfiguratsioon loob eraldi paketi nimega `vendors.bundle.js`, mis sisaldab kogu koodi `node_modules` kataloogist.

2. Ühise osa ekstraheerimine

Ühise osa ekstraheerimine tuvastab koodi, mida jagatakse mitme paketi vahel, ja loob jagatud koodi sisaldava eraldi paketi. See vähendab dubleerimist ja parandab vahemälu tõhusust.

Näide (Webpack): module.exports = { // ... muud konfiguratsioonid optimization: { splitChunks: { chunks: 'all', minSize: 20000, // Minimaalne suurus baitides, et osa luua. maxAsyncRequests: 30, // Maksimaalne paralleelsete päringute arv, kui laaditakse nõudmisel. maxInitialRequests: 30, // Maksimaalne paralleelsete päringute arv sisendipunktis. automaticNameDelimiter: '~', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/ priority: -10 }, default: { minChunks: 2, // Minimaalne arv osi, mida peab jagama moodul enne jagamist. priority: -20, reuseExistingChunk: true } } } } };

See konfiguratsioon ekstraheerib automaatselt ühised osad vastavalt määratud kriteeriumitele (nt `minChunks`, `minSize`).

3. Marsruudi eelkoormamine ja eellaadimine

Eelkoormamine ja eellaadimine on tehnikad ressursside eelnevalt laadimiseks, ennustades kasutaja tulevasi toiminguid. Eelkoormamine laadib ressursid taustal alla, kui brauser on jõudeolekus, samas kui eellaadimine seab prioriteediks konkreetsete ressursside laadimise, mis on praeguse lehe jaoks hädavajalikud.

Eelkoormamise näide:

<link rel="prefetch" href="/about.bundle.js" as="script">

See HTML-i silt juhendab brauserit eellaadima faili `about.bundle.js`, kui brauser on jõudeolekus. See võib oluliselt kiirendada navigeerimist lehele.

Eellaadimise näide:

<link rel="preload" href="/critical.bundle.js" as="script">

See HTML-i silt juhendab brauserit eellaadima `critical.bundle.js` laadimist. See on kasulik koodi laadimiseks, mis on lehe esialgse renderdamise jaoks hädavajalik.

4. Puu raputamine (Tree Shaking)

Puu raputamine on tehnika surnud koodi eemaldamiseks JavaScripti pakettidest. See tuvastab ja eemaldab kasutamata funktsioonid, muutujad ja moodulid, mille tulemuseks on väiksemad paketi suurused. Paketihaldurid nagu Webpack ja Rollup toetavad puu raputamist kohe karbist välja.

Puu raputamise peamised kaalutlused:

• Kasutage ES mooduleid (ESM): Puu raputamine sõltub ES moodulite (kasutades `import` ja `export` lauseid) staatilisest struktuurist, et määrata, milline kood on kasutamata.
• Vältige kõrvalmõjusid: Kõrvalmõjud on kood, mis sooritab väljaspool funktsiooni ulatust toiminguid (nt globaalsete muutujate muutmine). Paketihalduritel võib olla raske kõrvalmõjudega koodi puu raputada.
• Kasutage `package.json` faili `sideEffects` atribuuti: Saate `package.json` faili `sideEffects` atribuudi abil selgesõnaliselt deklareerida, millistel failidel teie paketis kõrvalmõjud on. See aitab paketihalduril puu raputamist optimeerida.

5. Veebitöötajate kasutamine arvutuslikult intensiivsete ülesannete jaoks

Veebitöötajad võimaldavad teil käitada JavaScripti koodi taustalõimes, takistades peamise lõime blokeerimist. See võib olla eriti kasulik arvutuslikult intensiivsete ülesannete jaoks, nagu pilditöötlus, andmeanalüüs või keerukad arvutused. Nende ülesannete veebitöötajasse ülekandmisega saate hoida oma kasutajaliidese reageerivana.

Näide:

// main.js
const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Tulemus töötajalt:', event.data);
};

worker.postMessage({ data: 'mingid andmed töötlemiseks' });

// worker.js
self.onmessage = (event) => {
  const data = event.data.data;
  // Sooritage arvutuslikult intensiivne ülesanne
  const result = processData(data);
  self.postMessage(result);
};

function processData(data) {
  // ... teie töötlemise loogika
  return 'töödeldud andmed';
}

6. Mooduli föderatsioon

Mooduli föderatsioon, mis on saadaval Webpack 5-s, võimaldab teil jagada koodi erinevate rakenduste vahel käitusajal. See võimaldab teil ehitada mikrofront-endse ja dünaamiliselt laadida mooduleid teistest rakendustest, vähendades üldist paketi suurust ja parandades jõudlust.

Näide:

Oletame, et teil on kaks rakendust, `app1` ja `app2`. Soovite jagada nuppude komponenti `app1`-st `app2`-sse.

app1 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... muud konfiguratsioonid
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.js'
      }
    })
  ]
};

app2 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... muud konfiguratsioonid
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3000/remoteEntry.js'
      }
    })
  ]
};

Rakenduses `app2` saate nüüd importida ja kasutada nuppude komponenti `app1`-st:

import Button from 'app1/Button';

Koodi jagamise tööriistad ja teegid

Mitmed tööriistad ja teegid aitavad teil oma projektides koodi jagamist rakendada:

• Webpack: Võimas ja mitmekülgne moodulipakendaja, mis toetab erinevaid koodi jagamise tehnikaid, sealhulgas sisendipunkti jagamist, dünaamilisi importimisi ja müüja jagamist.
• Rollup: Moodulipakendaja, mis paistab silma puu raputamisel ja väga optimeeritud pakettide loomisel.
• Parcel: Nullkonfiguratsiooniga paketihaldur, mis haldab automaatselt koodi jagamist minimaalse seadistusega.
• React.lazy: Sisseehitatud Reacti API komponentide laadimisega nõudmisel dünaamiliste importimiste abil.
• Loadable Components: Kõrgema järgu komponent koodi jagamiseks Reactis.

Koodi jagamise parimad tavad

Koodi jagamise tõhusaks rakendamiseks kaaluge järgmisi parimaid tavasid:

• Analüüsige oma rakendust: Tuvastage piirkonnad, kus koodi jagamisel võib olla kõige suurem mõju, keskendudes suurtele komponentidele, harva kasutatavatele funktsioonidele või marsruudipõhistele piiridele.
• Määrake jõudlusreeglid: Määrake oma veebisaidi jõudluse eesmärgid, nagu sihtlaadimisaeg või paketi suurused, ja kasutage neid reegleid oma koodi jagamise jõupingutuste suunamiseks.
• Jälgige jõudlust: Jälgige oma veebisaidi jõudlust pärast koodi jagamise rakendamist, et tagada soovitud tulemuste saavutamine. Kasutage jõudlusnäitajate mõõtmiseks tööriistu nagu Google PageSpeed Insights, WebPageTest või Lighthouse.
• Optimeerige vahemällu salvestamist: Konfigureerige oma server JavaScripti pakette õigesti vahemällu salvestama, et vähendada kasutajate vajadust koodi allalaadimiseks järgmistel külastustel. Kasutage vahemälu purustamise tehnikaid (nt räsi lisamine failinimele), et tagada kasutajatele alati koodi uusima versiooni kättesaamine.
• Kasutage sisu kohaletoimetamise võrku (CDN): Levitage oma JavaScripti pakette CDN-i kaudu, et parandada kasutajate laadimisaega kogu maailmas.
• Kaaluge kasutajate demograafiat: Kohandage oma koodi jagamise strateegiat sihtrühmade konkreetsetele vajadustele. Näiteks, kui märkimisväärne osa teie kasutajatest kasutab aeglase internetiühendust, peate võib-olla olema koodi jagamisel agressiivsem.
• Automaatne paketi analüüs: Kasutage paketi suuruse visualiseerimiseks ja optimeerimisvõimaluste tuvastamiseks tööriistu nagu Webpack Bundle Analyzer.

Reaalse maailma näited ja juhtumiuuringud

Paljud ettevõtted on oma veebisaidi jõudluse parandamiseks edukalt rakendanud koodi jagamist. Siin on mõned näited:

• Google: Google kasutab oma veebirakendustes, sealhulgas Gmailis ja Google Mapsis, laialdaselt koodi jagamist, et pakkuda kiiret ja reageerivat kasutajakogemust.
• Facebook: Facebook kasutab koodi jagamist oma erinevate funktsioonide ja komponentide laadimise optimeerimiseks, tagades, et kasutajad laadivad alla ainult vajaliku koodi.
• Netflix: Netflix kasutab koodi jagamist oma veebirakenduse käivituse aja parandamiseks, võimaldades kasutajatel sisu kiiremini voogedastama hakata.
• Suured e-kaubanduse platvormid (Amazon, Alibaba): Need platvormid kasutavad tootelehe laadimise aegade optimeerimiseks koodi jagamist, parandades ostukogemust miljonitele kasutajatele kogu maailmas. Nad laadivad dünaamiliselt toote üksikasju, seotud esemeid ja kasutajate ülevaateid kasutaja interaktsiooni põhjal.

Need näited demonstreerivad koodi jagamise tõhusust veebisaidi jõudluse ja kasutajakogemuse parandamisel. Koodi jagamise põhimõtted on universaalselt kohaldatavad erinevates piirkondades ja internetiühenduse kiirustes. Aeglasema internetiühendusega piirkondades tegutsevad ettevõtted saavad agressiivsete koodi jagamise strateegiate rakendamisega kõige olulisemaid jõudlusparandusi.

Kokkuvõte

Koodi jagamine on JavaScripti pakettide optimeerimise ja veebisaidi jõudluse parandamise jaoks ülioluline tehnika. Jagades teie rakenduse koodi väiksemateks, paremini hallatavateks osadeks, saate vähendada esialgseid laadimisaegu, parandada kasutajakogemust ja parandada vahemälu tõhusust. Mõistes erinevaid koodi jagamise tüüpe ja võttes kasutusele parimad tavad, saate oma veebirakenduste jõudlust oluliselt parandada ja pakkuda kasutajatele paremat kogemust.

Kuna veebirakendused muutuvad üha keerukamaks, muutub koodi jagamine veelgi olulisemaks. Uusimate koodi jagamise tehnikate ja tööriistadega kursis olles saate tagada, et teie veebisaidid on jõudluse jaoks optimeeritud ja pakuvad sujuvat kasutajakogemust kogu maailmas.